<template>
  <div class="duty-team-dialog flex flex-column">
    <antd-form class="flex-fixed" :options="formOptions" @submit="formSubmit" style="padding: 10px" />
    <common-table
      ref="table"
      :fetch="getGridResourceDataAsync"
      :fetch-params="gridResourceDataParams"
      :columns="columns"
      @vue:mounted="() => $refs.table.load()"
      :showToolbar="false"
      class="flex-auto-height"
    >
      <template #index="{ text, scope, index }">
        <span>{{ index + 1 }}</span>
      </template>
      <template #typeName="{ text, scope }">
        <span v-if="scope.type_code === 'zz_01_07' && scope.manager_level === 3">网格长</span>
        <span v-else>{{ text }}</span>
      </template>
      <template #action="{ text, scope }">
        <span style="color: #3f8eee; cursor: pointer" @click="details(scope)">详情</span>
      </template>
    </common-table>
  </div>
</template>

<script>
import { getEnumText } from '@gis/lib/enums/index.js';
import AntdForm from '@gis/lib/components/antd-form/index.js';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { handleTableRes } from '@gis/lib/utils/resolver.js';
import { gridTeamList } from '@gis/lib/api';

export default {
  name: 'duty-team-dialog',
  components: { AntdForm },
  props: {
    typeCode: { type: String, default: undefined },
    managerLevel: { type: Number },
  },
  data() {
    return {
      filterFormData: {},
      typeList: [],
      formOptions: [
        {
          component: 'a-input',
          label: '姓名',
          field: 'name',
          // labelCol: { span: 12 },
          // wrapperCol: { span: 12 },
        },
        {
          component: 'a-input',
          label: '电话',
          field: 'phone',
          // labelCol: { span: 12 },
          // wrapperCol: { span: 12 },
        },
      ],
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          width: 140,
        },
        {
          title: '性别',
          dataIndex: 'sex',
          width: 100,
          align: 'center',
          customRender: (v) => getEnumText('gender', v),
        },
        {
          title: '电话',
          dataIndex: 'phone',
          width: 140,
          align: 'center',
        },
        {
          title: '所在单位',
          dataIndex: 'unit_name_concat',
        },
        {
          title: '类型',
          dataIndex: 'type_name',
          width: 140,
          scopedSlots: { customRender: 'typeName' },
        },
        {
          title: '状态',
          dataIndex: 'online',
          width: 100,
          customRender: (v) => (v === 0 ? '离线' : '在线'),
        },
        // {
        //   title: "操作",
        //   scopedSlots: { customRender: "action" },
        //   width: 80,
        //   align: "center",
        // },
      ],
    };
  },
  computed: {
    areaCode() {
      const { area_code } = useUserInfoStore();
      return area_code;
    },
    basicParams() {
      return {
        type_code: this.typeCode,
        area_code: this.areaCode,
        manager_level: this.managerLevel,
        status: 1,
      };
    },
    gridResourceDataParams() {
      return Object.assign({}, this.basicParams, this.filterFormData);
    },
  },
  methods: {
    formSubmit(val) {
      this.filterFormData = Object.assign({}, this.filterFormData, val);
      this.$nextTick(() => {
        this.$refs.table.load();
      });
    },
    async getGridResourceDataAsync(params) {
      if (!params) return;
      return await handleTableRes(gridTeamList, params);
    },
    details() {},
  },
};
</script>

<style scoped lang="less">
.duty-team-dialog {
  width: 100%;
  height: 100%;
}
</style>
